<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="/struts-tags" prefix="s"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib tagdir="/WEB-INF/tags" prefix="tag"%>

<s:set var="user_info" value="%{#session.USER_INFO}" />

<s:if test="%{#user_info == null}"><jsp:forward page="login.jsp"></jsp:forward></s:if>


<html>
<head>
<title>EPCS Calendar</title>
<link href="css/bootstrap.css" rel="stylesheet" media="screen">
<link href="css/bootstrap-theme.css" rel="stylesheet" media="screen">
<link href="css/ace.min.css" rel="stylesheet" media="screen">
<link href="css/font-awesome.min.css" rel="stylesheet" />
<link href="css/jquery.tagsinput.css" rel="stylesheet" />
<link href="css/trung-style.css" rel="stylesheet" media="screen">
<link href='css/cupertino/jquery-ui.min.css' rel='stylesheet' />
<link href="css/jquery.gritter.css" rel="stylesheet" type="text/css" media="all"/>
<link href="css/trung-style.css" rel="stylesheet" media="screen">

<script src="js/jquery.min.js"></script>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="js/jquery.tagsinput.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/ace.min.js"></script>
<script src='js/jquery-ui.custom.min.js'></script>
<script src='js/jquery.gritter.min.js'></script>
<script src="http://localhost:8081/socket.io/socket.io.js"></script>


</head>
<body>

	<div class="index">
		<!--header -->
		<tag:HeaderTag username="${user_info.fullname}">
			<div class="breadcrumbs" id="breadcrumbs" style="margin-bottom: 10px">
				<ul class="breadcrumb" style="margin: 8px;">
					<li><i class="icon-home home-icon"></i><a href="./Index.do">Trang
							chủ</a></li>
					<li class="active">Top sự kiện</li>
				</ul>
				<!-- .breadcrumb -->
			</div>
		</tag:HeaderTag>
		<!--end header -->

		<!-- main body -->
		<tag:SideBarTag active_area="4"></tag:SideBarTag>

		<div class="main-content">
			<div class="page-header">
				<h1>Top sự kiện</h1>
			</div>

			<div class="row">
                <!-- left column -->
                <div class="col-md-8 boxContent" id="scrollArea">
                <tag:MessageAlertTag></tag:MessageAlertTag>
                    <jsp:include page="MostFollowingEventArea.jsp"></jsp:include>
                </div>

                <!-- side right column -->
                <div class="col-md-4 boxContent">
                <jsp:include page="RightSideBarArea.jsp"></jsp:include>
                	<jsp:include page="RightSideBarArea2.jsp"></jsp:include>
                </div>
            </div>
		</div>
		<script>
		
		// event scroll paging
	    var processing = true;
	    var pageNumber = 1;
	    $(document).ready(function() {
			$(document).scroll(function(e) {	
			    if (processing) {
					// khi scroll màn hình dc 80% thì xử lý load data (lấy: độ cao doc - độ cao màn hình)
				    var scrollAmount =+ parseInt($(window).scrollTop());
				    var documentHeight = $(document).height();
				
				    // calculate the percentage the user has scrolled down the page
				    var scrollCell = (documentHeight - scrollAmount);
				    if (scrollCell < 800) {
						pageNumber ++;
						processing = true;
						$.ajax({
						    url : "MoreMostFollowing.do",
						    type : "Post",
						    data : {
								pageNumber : pageNumber
						    },
						    success : function(html) {
							var data = html.trim();
							if (data != "Unauthorized") {
							    if (data != 'empty'){
									$('#scrollArea').append(data);	
									
							    } else {
									processing = false;
									//alert("Hết hàng");
							    }
							} else {
							    window.location.href = "Index.do";
							}
						    },
						    error : function(data) {
							alert("fail");
						    }
						});
				    }
			    }
			});
	    });
	    
	  
	</script>
	<script>
	
	function gritter(title, content) {
        $.extend($.gritter.options, { 
        	position: 'bottom-left', // defaults to 'top-right' but can be 'bottom-left', 'bottom-right', 'top-left', 'top-right' (added in 1.7.1)
        	fade_in_speed: 'medium', // how fast notifications fade in (string or int)
    		fade_out_speed: 2000, // how fast the notices fade out
    		time: 6000 // hang on the screen for...
    });
        var unique_id = $.gritter.add({
            title: title,
            text: content,
            sticky: true,
            time: 2000,
            position: 'bottom-left'
        });
        setTimeout(function () {
            $.gritter.remove(unique_id, {
                fade: true,
                speed: 'fast'
            });
        }, 3000)

    };
				    // event nhấn nút theo dõi / hủy theo dõi
					function changeFollowing(id,eventId,button){
						 var numberOfFollow = $('#numberOfFollow_' + eventId);
					 	// ko cho user bấm nữa
					    button.setAttribute("disabled", "disabled");
					    $.ajax({
				            url: "MostFollowingEvent.do",
				            type: "GET",
				            data: { id: id, eventId: eventId },
				            success: function (data) {
				            	button.removeAttribute("disabled");	
				            	if (data != "Unauthorized"){
				            		if(data != "cancelled"){
				            			var arr = data.split(',');
					            		if(arr[0] != "isExisted"){
					            			if (button.value == "Hủy theo dõi")
						            		{
						            		button.value = "Theo dõi";
						            		button.setAttribute("class","btn btn-success btn-xs");
						            		button.setAttribute("onclick","changeFollowing('',"+eventId+",this)");
						            		//alert("class=" + button.getAttribute("class")+ " onclick="+button.getAttribute("onclick"));
						            	numberOfFollow.html(parseInt(numberOfFollow.text()) - 1);
						            		gritter("Thông báo", "Hủy theo dõi thành công");
							            	}else if (button.value = "Theo dõi"){
							            		
							            		button.value = "Hủy theo dõi";
							            		button.setAttribute("class","btn btn-danger btn-xs");	
							            		button.setAttribute("onclick","changeFollowing('"+data+"',"+eventId+",this)");
							            		numberOfFollow.html(parseInt(numberOfFollow.text()) + 1);
							            		gritter("Thông báo", "Theo dõi thành công");
							            		//alert("class=" + button.getAttribute("class")+ " onclick="+button.getAttribute("onclick"));	
							            	}
					            		}else{
					            			alert("Bạn đã theo dõi sự kiện này!");
					            			button.value = "Hủy theo dõi";
						            		button.setAttribute("class","btn btn-danger btn-xs");	
						            		button.setAttribute("onclick","changeFollowing('"+arr[1]+"',"+eventId+",this)");
					            		}
				            		}else{
				            			alert("Sự kiện này đã bị đóng");
				            			window.location.href = "Index.do";
				            		}
				            	} else {
				            		window.location.href = "Index.do";
				            	}
				            	
				            	
				            },
				            error: function (data) {
				                alert("fail");
				            }
				        });
					}
					</script>
	</div>
</body>
</html>